/**
 * Created by 荆安喜 on 2017/12/4.
 */
$(function () {
    var ad = appData();

    $(function () {
        event()
    })

    //初始化事件注册
    function event() {

        //时间注册
        //$.daterRangeDefine("#time", 'YYYY-MM-DD',10000000)
        $("#time").daterangepicker({
            maxDate: moment().subtract(1, 'days').endOf('day'),
            ranges: {
                '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                '最近7日': [moment().subtract(7, 'days'),moment().subtract(1, 'days')]
            }
        })



        //分析
        $('#analysis').on('click', analysis)
        $('#time').val( moment().subtract('days', 8).format('YYYY-MM-DD')+' - '+moment().subtract('days', 1).format('YYYY-MM-DD'))

        analysis()

    }


    //绘图
    function drawMap(id, option) {
        var myChart = echarts.init(document.getElementById(id));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //分析事件
    function analysis() {
        var time = $('#time').val()
        if (time == '') {
            return _as.jAlert("<p>请选择时间</p>")
        }
        //资源访问量排名
        ad.selectList('SOURCE_VISIT_RANK', {time: time}, function (data) {
            $("#rank").empty()
            var str = ``
            data.forEach(function (d, i) {
                str = str + `<li><strong>${d.name}</strong>   <div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width: ${d.percent}%">${d.percent}%</div></div><em  title="访问次数">${d.number}</em></li>`
            })
            $("#rank").append(str)
            $(".scrollbar").mCustomScrollbar({
                autoHideScrollbar: true,
                advanced: {
                    autoExpandHorizontalScroll: true
                }
            });
        })
        //活跃IP统计
        ad.selectList('ACTIVE_IP_STATISTICS', {time: time}, function (data) {
            $("#ip").empty()
            var str = ``
            data.forEach(function (d, i) {
                str = str + `<li><strong>${d.name}</strong>   <div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width: ${d.percent}%">${d.percent}%</div></div><em  title="访问次数">${d.number}</em></li>`
            })
            $("#ip").append(str)
            $(".scrollbar").mCustomScrollbar({
                autoHideScrollbar: true,
                advanced: {
                    autoExpandHorizontalScroll: true
                }
            });
        })
        //每日流量规律
        ad.selectList('DAY_FLOW_REGULARITY', {time: time}, function (data) {
            var option = {
                title: {
                    text: '日均访问量规律',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b} {a} : {c}  "
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.xAxis
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '访问次数',
                        type: 'line',
                        smooth: true,
                        data: data.data
                    }
                ]
            }

            drawMap('chart1',option)

        })
        //IP来源分布
        ad.selectList('IP_DATA_FROM', {time: time}, function (data) {
            var option= {
                title: {
                    text: 'IP来源分布'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} {a}: {c} ({d}%)'
                },
                series: [
                    {
                        name:'IP数',
                        type:'pie',
                        selectedMode: 'single',
                        selectedOffset: 10,
                        radius: ['42%', '55%'],
                        data:data
                    }
                ]
            }
            drawMap('chart2',option)

        })
        //操作类型分布
        ad.selectList('OPERATION_TYPE_FROM', {time: time}, function (data) {
            var option= {
                title: {
                    text: '操作类型'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} {a}: {c} ({d}%)'
                },
                series: [
                    {
                        name:'操作类型',
                        type:'pie',
                        selectedMode: 'single',
                        selectedOffset: 10,
                        radius: ['42%', '55%'],
                        data:data
                    }
                ]
            }
            drawMap('chart3',option)



        })

    }
})